<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="page-header-content">
        <div class="avatar">
          <a-avatar size="large" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        </div>
        <div class="content">
          <div class="content-title">
            {{ memberInfo.name }}<span class="welcome-text"></span>
          </div>
          <div> {{ memberInfo.mobile }} | {{ memberInfo.addressStr }}</div>
        </div>
      </div>
    </template>
    <a-card :bordered="false">
      <div class="table-operations">
        <a-button type="primary" @click="$refs.createForm.handleAdd(queryParam.member)">
          <a-icon type="plus" />新增
        </a-button>
        <a-button type="primary" @click="toMemberPage">
          <a-icon type="rollback" />返回
        </a-button>
      </div>

      <a-collapse accordion :bordered="false">
        <template v-for="(info, sub) in list">
          <a-collapse-panel :key="sub" :header="info.cardName + '-' + (info.status == 0 ? '未开卡' : (info.status == 1 ? '正常' : '失效'))">
            <a-descriptions :column="4">
              <a-descriptions-item label="会员卡名称">
                {{ info.cardName }}
              </a-descriptions-item>
              <a-descriptions-item label="开卡日期">
                {{ info.createTime }}
              </a-descriptions-item>
              <a-descriptions-item label="剩余次数">
                {{ info.remain }}
              </a-descriptions-item>
              <a-descriptions-item>
                <a   @click="updateCardStatus(info,1)">开卡</a>
                <a-divider type="vertical" />
                <a  @click="updateCardStatus(info,2)">停卡</a>
                <a-divider type="vertical" />
                <a   @click="$refs.createForm.handleUpdate(info)">修改</a>
              </a-descriptions-item>
               

            </a-descriptions>
          </a-collapse-panel>
        </template>
      </a-collapse>

    </a-card>
    <!-- 增加修改 -->
    <create-form ref="createForm" @ok="getList" />
  </page-header-wrapper>
</template>

<script>
import { listMemberMilkCard, delMemberMilkCard,updateMemberMilkCard,updateCardStatus} from '@/api/system/memberMilkCard'
import { getMilkMember } from '@/api/system/milkMember'
import CreateForm from './modules/CreateForm'
import { PageHeaderWrapper } from '@/components/ProLayout'
import { tableMixin } from '@/store/table-mixin'
import { mapGetters } from 'vuex'

export default {
  name: 'MemberMilkCard',
  components: {
    CreateForm,
    PageHeaderWrapper
  },
  mixins: [tableMixin],
  data() {
    return {
      memberInfo: {},
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      // 查询参数
      queryParam: {
        memberId: null,
        type: null,
        count: null,
        milkType: null,
        remain: null,
        amount: null,
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '${comment}',
          dataIndex: 'id',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '配送类型',
          dataIndex: 'type',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '次数',
          dataIndex: 'count',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '奶品类型',
          dataIndex: 'milkType',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '剩余次数',
          dataIndex: 'remain',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]
    }
  },
  filters: {
  },
  created() {
    this.queryParam.member = this.$route.query.memberId;
    this.getList()
    this.queryMilkMembe()
  },
  computed: {
    ...mapGetters([
      'avatar',
      'nickname'
    ])
  },
  watch: {
  },
  methods: {
    updateCardStatus(info,status){
      if(info.status == status) {
        this.$message.warning(info.status == 1 ? "当前用户已开卡！" : "当前用户已停卡！");
        return
      }
      var msg = status == 1 ? '开卡成功' : '停卡成功'
      updateCardStatus({id:info.id,member:info.member,status:status}).then(resp => {
        if(resp.code == 200) {
          this.$message.success(msg,3)
          this.getList()
        }else {
          this.$message.error(msg,3)
        }
      })
    },
    toMemberPage() {
      this.$router.push({ path: '/milk/milkMember', query: { deptId: this.deptId, name: this.queryParam.name } })
    },
    queryMilkMembe() {
      getMilkMember(this.queryParam.member).then(resp => {
        this.memberInfo = resp.data
      })
    },
    /** 查询牛奶会员卡列表 */
    getList() {
      this.loading = true
      listMemberMilkCard(this.queryParam).then(response => {
        this.list = response.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        type: undefined,
        count: undefined,
        milkType: undefined,
        remain: undefined,
        amount: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var that = this
      const ids = row.id || this.ids
      this.$confirm({
        title: '确认删除所选中数据?',
        content: '当前选中编号为' + ids + '的数据',
        onOk() {
          return delMemberMilkCard(ids)
            .then(() => {
              that.onSelectChange([], [])
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
            })
        },
        onCancel() { }
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk() {
          that.download('system/memberMilkCard/export', {
            ...that.queryParam
          }, `memberMilkCard_${new Date().getTime()}.xlsx`)
        },
        onCancel() { }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../index.less";
</style>